<template>
  <div class="home-container">
    <el-card class="entry-card">
      <div class="logo">
        <h1>食堂预约</h1>
      </div>

      <!-- 食堂查看订单界面 -->
      <div
        class="button-group"
        v-show="['13566511216'].includes(WORKID)"
      >

        <el-button
          style="color:rgb(0, 53, 140)"
          class="action-button"
          @click="navigateTo('history')"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>历史订单</h2>
              <p>查询和管理已有订单</p>
            </div>
          </span>
        </el-button>

        <el-button
          type="success"
          class="action-button"
          @click="navigateTo('roomHistory')"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>历史预约</h2>
              <p>查询、删除历史预约</p>
            </div>
          </span>
        </el-button>

      </div>

      <!-- 人员下单一级界面,选点餐还是包厢预约 -->
      <div
        class="button-group"
        v-show="!select && !['13566511216'].includes(WORKID)"
      >

        <el-button
          style="color:rgb(0, 53, 140)"
          class="action-button"
          @click="select = '包厢'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <Calendar />
            </el-icon>
            <div class="button-text">
              <h2>餐厅预约(业务招待)</h2>
            </div>
          </span>
        </el-button>

        <el-button
          style="color:rgb(0, 53, 140)"
          class="action-button"
          @click="select = '点餐'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <Eleme />
            </el-icon>
            <div class="button-text">
              <h2>点心外卖预约</h2>
            </div>
          </span>
        </el-button>

        <!-- <el-button
          type="success"
          class="action-button"
          @click="navigateTo('history')"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>查看历史订单</h2>
              <p>查询和管理已有订单</p>
            </div>
          </span>
        </el-button> -->

        <!-- <el-button
          type="success"
          class="action-button"
          @click="navigateTo('roomHistory')"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>查看包厢预约历史</h2>
              <p>查询包厢预约历史</p>
            </div>
          </span>
        </el-button> -->

      </div>

      <!-- 返回按钮 -->
      <div style="text-align: left;">
        <el-text
          style="font-size: large;"
          type="primary"
          @click="select =''"
          v-show="select && !['13566511216'].includes(WORKID)"
        >
          <el-icon>
            <Back />
          </el-icon>
          返回
        </el-text>
      </div>

      <!-- 点餐和包厢预约二级界面 -->
      <div
        class="button-group"
        v-show="select && !['13566511216'].includes(WORKID)"
      >
        <el-button
          style="color:rgb(0, 53, 140)"
          class="action-button"
          @click="navigateTo('create')"
          v-show="select == '点餐'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <ForkSpoon />
            </el-icon>
            <div class="button-text">
              <h2>点心外卖预约</h2>
              <p>开始新的点餐流程</p>
            </div>
          </span>
        </el-button>

        <el-button
          color="rgb(199.5, 201, 204)"
          class="action-button"
          @click="navigateTo('history')"
          v-show="select == '点餐'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>历史订单</h2>
              <p>查询和管理已有订单</p>
            </div>
          </span>
        </el-button>

        <el-button
          style="color:rgb(0, 53, 140)"
          class="action-button"
          @click="navigateTo('orderRoom')"
          v-show="select == '包厢'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <Phone />
            </el-icon>
            <div class="button-text">
              <h2>餐厅预约</h2>
              <p>查询和预约包厢</p>
            </div>
          </span>
        </el-button>

        <el-button
          color="rgb(199.5, 201, 204)"
          class="action-button"
          @click="navigateTo('roomHistory')"
          v-show="select == '包厢'"
        >
          <span class="button-content">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="button-text">
              <h2>历史预约</h2>
              <p>查询、删除历史预约</p>
            </div>
          </span>
        </el-button>

      </div>

    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { Plus, List, Eleme, Calendar, ForkSpoon, Phone, Back } from '@element-plus/icons-vue';
import VueCookie from 'vue-cookie';
import { ref } from 'vue';
import myAxiosWXPost from '@/myAxios/myAxiosWXPost';

let select = ref('');

let WORKID = VueCookie.get('userid');
const router = useRouter();

const navigateTo = (type) => {
  console.log('type :>> ', type);
  if (type === 'create') {
    router.push('/order');
  } else if (type === 'history') {
    router.push('/history');
  } else if (type === 'orderRoom') {
    router.push('/orderRoom');
  } else if (type === 'roomHistory') {
    router.push('/roomHistory');
  }
};

// let url = `http://smart.haitian.com/Cheresting/driver_order_menu/dist/index.html/#/roomHistory`
//   + `?BX_RECORD_ID=${order.BX_RECORD_ID}`;


</script>

<style scoped>
.home-container {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.entry-card {
  width: 100%;
  max-width: 800px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.logo {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.logo h1 {
  font-size: 2.5rem;
  margin: 0;
}

.button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 0px;
  margin-top: 10px;
}

.action-button {
  height: 180px;
  width: 100%;
  border-radius: 15px;
  transition: all 0.3s ease;
  margin-left: 0px;
}

.action-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.icon {
  font-size: 3.5rem !important;
  margin-bottom: 15px;
}

.button-text h2 {
  margin: 10px 0;
  font-size: 1.8rem;
}

.button-text p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .logo h1 {
    font-size: 2rem;
  }

  .button-group {
    grid-template-columns: 1fr;
  }

  .action-button {
    height: 150px;
  }

  .icon {
    font-size: 2.5rem !important;
  }

  .button-text h2 {
    font-size: 1.5rem;
  }
}
</style>